<template>
	<view class="content">
		<!-- 选项卡 -->
		<view class="top-tabs-list-box">
			<u-tabs 
				name="cate_name"
				:list="typeList"
				active-color="#181818"
				height="50"
				inactive-color="#868686" 
				:is-scroll="true"
				:current="current"
				@change="onChange"
			></u-tabs>
		</view>
		<!-- 筛选框 -->
		<view class="pluge-lection-box">
			<pluge-lection
				@getSort="screenChange"
			></pluge-lection>
		</view>
		<!-- 商品列表 -->
		<goods-list :getDataList="list" @goGoodsDetails="goIntegralDetails"></goods-list>
		<!-- 空状态 -->
		<icon-status v-if="!list.length" :imgUrl="'../../pageIndex/static/icon23.png'" :statusInfo="'暂无数据'"></icon-status>
	</view>
</template>

<script>
	import plugeLection from '@/components/goodsList/plugeLection.vue';
	import goodsList from '@/components/goodsList/goodsList.vue';
	import iconStatus from '@/components/noRecordIcon/iconStatus.vue';
	export default {
		data() {
			return {
				cid: '', // 选中的分类ID
				typeList: [], // 分类列表
				current: 0, // 选项卡绑定index
				page: 1, // 页码
				limit: 20, // 每页条数
				sale: 0, // 销量
				price: 0, // 价格
				list: [], // 商品列表
				mer_id:0,//门店ID
			}
		},
		onLoad(option) {
			uni.showLoading({ title:"加载中" });
			this.mer_id = option.merId||'';
			this.getTypeData();
		},
		methods: {
			getTypeData(){ //获取顶部分类标题
				const { mer_id } = this;
				this.$u.api.secondCateApi({mer_id}).then(res=>{
					if(res.code==1){
						console.log('标题:',res);
						this.cid = res.data[0].store_category_id;
						this.typeList = res.data;
						this.getData();
					}
				});
			},
			getData(){
				const { mer_id, cid, sale, price, page, limit } = this;
				this.$u.api.productLstApi({mer_id, cid, sale, price, page, limit}).then(res=>{
					if(res.code==1){
						console.log('门店数据：',res);
						if(this.page==1){
							this.list = res.data;
						}else{
							if(res.data.length>0){
								this.list = this.list.concat(res.data);
							}else{
								$showToast('没有更多了');
							}
						}
					}
				});
			},
			screenChange(changes){
				uni.showLoading({ title:"加载中" });
				if(changes.type=='sales'){
					this.sale = changes.sort;
					this.price = 0;
					this.getData();
				}else if(changes.type=='price'){
					this.price = changes.sort;
					this.sale = 0;
					this.getData();
				}else{
					this.price = 0;
					this.sale = 0;
					this.getData();
				}
			},
			onChange(e){
				uni.showLoading({ title:"加载中", mask:true });
				this.current = e;
				this.cid = this.typeList[e].store_category_id;
				this.list.length = 0;
				this.getData();
			},
			goIntegralDetails(goodsId){
				this.$gourl(`/pageCart/goodsInfo/goodsInfo?goodsId=${goodsId}`);
			},
		},
		components:{
			plugeLection,
			goodsList,
			iconStatus,
		},
		onReachBottom() {
			uni.showLoading({ title:"加载中", mask:true });
			this.page++;
			this.getData();
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		width: 100%;
		font-family: Microsoft YaHei;
		padding-top: 100rpx;
		.top-tabs-list-box {
			position: fixed;top: 0;z-index: 100;
			width: 100%;
			padding: 20rpx 0;
			box-shadow: 0px 2px 18px 0px rgba(0, 0, 0, 0.06);
			background: #fff;
		}
		.pluge-lection-box{
			position: fixed !important;
			top: 90rpx !important;
			z-index: 99;
			background: #fff;
		}
	}
</style>
